<template>
	<div class="txjl">
		<div class="top">
			<div @click="$router.go(-1)">
				<img src="../assets/img/7519.png" alt="" />
			</div>
			<span>提现记录</span>
		</div>
		<div v-for="item in this.list" :key="item.id" class="jl">
			<div>
				<span class="span1">{{ item.CreateTime }}</span>
				<span>提现{{ item.Money }}彩币&emsp;({{ item.Money }})元</span>
			</div>
			<span :class="[
          item.Status == 1 || item.Status == 5 ? ceng : '',
          item.Status == 2 ? lu : '',
          item.Status == 3 || item.Status == 4 ? hui : '',
        ]">{{ spanm[item.Status] }}</span>
		</div>
		<div class="el-box" v-if="!show">
			<el-button plain @click="shang" class="el-btn1">上一页</el-button>
			<el-button plain @click="xia" class="el-btn2">下一页</el-button>
		</div>
		<div class="wu" v-if="show">
			暂无数据
		</div>
	</div>
</template>

<script>
	import local from "@/utils/local";
  import {GetCbTxList} from "@/api/all.js"

	export default {
		data() {
			return {

				show:false,
				ceng: "ceng",
				lu: "lu",
				hui: "hui",
				list: [],
				yema: 1,
				tiaoshu: 8,
				spanm: {
					1: "等待审核",
					2: "已打款",
					3: "审核失败",
					4: "撤销",
					5: "审核中",
				},
				geren: {}

			};
		},

    async created() {
			await this.getData();
			this.geren = local.get("Code");
		},

		methods: {

			getData() {
        let datas = {
          StartTime: "",
					EndTime: "",
					UserId: this.geren.Id,
					Pagination: {
					  Rows: this.tiaoshu,
						Page: this.yema
					}
        };
        let data = datas;
        GetCbTxList(data).then(res =>{
          console.log(res,'xxxxxxxx');

          if (res.Code == 200) {
              let Data = res.Data.Data
              console.log(Data,'qwqwqw');
							if (Data== '' || Data== []) {
									this.show = true
							}else {
									this.list = Data;
									console.log(this.list, '1111');
							}
					}
        })
			},

      // 上一页
			shang() {
				this.yema--;
				if (this.yema <= 0) {
					this.yema = 1;
					document.querySelector(".el-btn1").style = "display:none";
				} else {
					document.querySelector(".el-btn2").style = "display:block";
				}
				this.getData();
			},

      // 下一页
			xia() {
				this.yema = this.yema + 1;
				this.getData();

        let datas = {
          StartTime: "",
					EndTime: "",
					UserId: this.geren.Id,
					Pagination: {
					  Rows: this.tiaoshu,
						Page: this.yema
					}
        };
        let data = datas;
        GetCbTxList(data).then(res =>{
          console.log(res,'xxxxxxxx');

          if (res.Code == 200) {
            let Data = res.Data.Data
            console.log(Data,'qwqwqw');
						this.list = Data;
						if (Data.length < this.tiaoshu) {
							document.querySelector(".el-btn2").style = "display:none";
							document.querySelector(".el-btn1").style = "display:block";
						}
					}
        })     				
			}
      // 
		},		
	};
</script>

<style lang="less" scoped>
	.wu {
		width: 100%;
		height: 15.25rem;
		line-height: 15.25rem;
		text-align: center;
		font-size: 1.25rem;
		color: #CCCCCC;
	}

	.el-box {
		width: 100%;
		display: flex;
		justify-content: space-evenly;
		margin-top: 3%;
	}

	.ceng {
		color: #ff6c00;
	}

	.lu {
		color: #29ae66;
	}

	.hui {
		color: #7d7d7d;
	}

	.txjl {
		width: 100%;
		height: 100%;
		background-color: #Fff
	}

	.top {
		width: 100%;
		height: 7%;
		padding-left: 3%;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.top>div {
		height: 1.125rem;
		width: 1.125rem;
		margin-right: 37%;
		font-size: 1.1rem;
		font-weight: 500;
		color: #3a3a3a;
	}

	.top>div>img {
		width: 100%;
		height: 100%;
	}

	.jl {
		width: 95%;
		height: 7%;
		border-bottom: 1px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		font-size: 0.9rem;
		font-weight: 400;
		color: #333333;
	}

	.span1 {
		margin-right: 1.5rem;
	}

	.jl>div {
		width: 84%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.jl>div>span:nth-child(2) {
		width: 65%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: inline-block;
	}
</style>
